<template>
  <div class="rest-pwd-main base-main">
    <van-cell-group class="bgcFFF">
      <van-field
        v-model="phoneNum"
        clearable
        type="number"
        label="手机号"
        placeholder="请输入手机号"
      />
      <van-field
        v-model="code"
        clearable
        type="number"
        label="手机验证码"
        placeholder="请输入验证码"
      >
        <span slot="button" class="color3D7EFF fs13" @click="handleGetCode">发送验证码</span>
      </van-field>
      <van-field
        v-model="pwd"
        clearable
        label="设置新密码"
        placeholder="请输入您的新密码"
      />
      <van-field
        v-model="confirmPwd"
        clearable
        label="确认新密码"
        placeholder="请再次输入您的新密码"
      />
    </van-cell-group>

    <p class="text-c btn-to-login">
      <span class="base-btn" @click="haneldRestPwd">确认修改</span>
    </p>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        phoneNum: '', // 手机号
        code: '' , // 验证码
        pwd: '', // 密码
        confirmPwd: '', // 确认密码
      }
    },
    methods: {
      // 发送验证码
      handleGetCode() {
        const _this = this
        let phoneTest = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        if (!_this.phoneNum) {
          _this.$toast("请输入手机号")
          return false
        } else if (!phoneTest.test(_this.phoneNum)) {
          _this.$toast("请填写正确手机号")
          return false
        } else {
          console.log(this.phoneNum);
        }
      },
      // 确认修改并登录
      haneldRestPwd() {
        const _this = this
        let phoneTest = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        if (!_this.phoneNum) {
          _this.$toast("请输入手机号")
          return false
        } else if (!phoneTest.test(_this.phoneNum)) {
          _this.$toast("请填写正确手机号")
          return false
        } else if (!this.code) {
          _this.$toast("请填写验证码")
          return false
        } else if (!_this.pwd) {
          _this.$toast("请填写新密码")
          return false
        } else if (_this.pwd.length < 8) {
          _this.$toast("密码长度最少8位数")
          return false
        } else if (!_this.confirmPwd) {
          _this.$toast("请填写确认密码")
          return false
        } else if (_this.pwd != _this.confirmPwd) {
          _this.$toast("两次输入的密码不一致")
          return false
        } else {
          console.log(this.phoneNum);
          console.log(this.code);
          console.log(this.pwd);
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/register.scss';
</style>
